import { Button, Skeleton } from 'antd';
import { User } from 'my-web-core/auth';
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';

import UserAvatar from '@/features/users/components/UserAvatar';
import UsersService from '@/features/users/services/users-service';

import '@/features/users/components/UserDetail.css';

function UserDetail() {
  const params = useParams();
  const navigate = useNavigate();
  const [user, setUser] = useState<User>();

  useEffect(() => {
    new UsersService().queryDetails(params.id!).then((p) => {
      setUser(p);
    });
  }, [params.id]);

  return (
    <>
      {user ? (
        <div className="UserDetail-container">
          <div style={{ marginBottom: '20px', backgroundColor: '#ededed', padding: '5px' }}>
            <Button onClick={() => navigate(-1)}>返回</Button>
          </div>
          <div style={{ marginBottom: '10px' }}>
            <UserAvatar {...user} />
          </div>
          <div>{user.username}</div>
        </div>
      ) : (
        <Skeleton />
      )}
    </>
  );
}

export default UserDetail;
